<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章管理</title>
    <link rel="stylesheet" href="../utils/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/文章管理.css">
    <script src="../JS/jquery-3.4.1.min.js"></script>
    <script src="../utils/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 顶部 -->
    <nav class="navbar navbar-default navbar-static-top head" style="margin-bottom: -20px;">
        <div class="navbar-header col-lg-2 Shopping_title">
            <a href="#" class="navbar-brand">商城后台</a>
        </div>
        <div class="Menu">
            <span class="glyphicon glyphicon-menu-hamburger"></span>
        </div>
        <div class="pull-right Out">
            <span class="glyphicon glyphicon-log-in"></span>
        </div>
    </nav>
    <!-- 左侧导航栏 -->
    <div class="navbar-default" id="nav_sub" style="margin-top: 19px;">
        <ul class="nav">
            <li><img src="../images/logo.gif" alt="" class="img-responsive"></li>
            <!-- 商品管理 -->
            <li class="First_li"><a href="#sub_1" data-toggle="collapse" id="btn1">商品管理<span
                        class="glyphicon glyphicon-chevron-right pull-right right_arrows"></span></a>
                <ul id="sub_1" class="collapse Second_li nav">
                    <li><a href="#">商品分类管理</a></li>
                    <li><a href="#">商品管理</a></li>
                    <li><a href="#">Option管理</a></li>
                </ul>
            </li>
            <!-- 订单管理 -->
            <li class="First_li">
                <a href="#sub_2" data-toggle="collapse">订单管理<span
                        class="glyphicon glyphicon-chevron-right pull-right right_arrows"></span></a>
                <ul id="sub_2" class="collapse Second_li nav">
                    <li><a href="#">查看订单</a></li>
                </ul>
            </li>
            <!-- 用户管理 -->
            <li class="First_li"><a href="#">用户管理</a></li>
            <!-- 评论管理 -->
            <li class="First_li"><a href="#">评论管理</a></li>
            <!-- 文章管理 -->
            <li class="First_li">
                <a href="#sub_3" data-toggle="collapse">文章管理<span
                        class="glyphicon glyphicon-chevron-right pull-right right_arrows"></span></a>
                <ul id="sub_3" class="collapse Second_li nav">
                    <li><a href="文章管理.html">分类管理</a></li>
                    <li><a href="文章管理2.html">文章管理</a></li>
                </ul>
            </li>
            <!-- 幻灯片管理 -->
            <li class="First_li"><a href="#">幻灯片管理</a></li>
            <!-- 销量图表 -->
            <li class="First_li"><a href="#">销量图表</a></li>
        </ul>
    </div>
    <!-- 右侧内容 -->
    <div class="container-fluid">
        <div class="row">
            <!-- 表单1 -->
            <div id="content_1" class="col-lg-10" style="margin-top: 20px;">
                <!-- 第一行 -->
                <div>
                    <label class="col-lg-6">标题</label>
                    <label class="col-lg-6">文章分类</label>
                </div>
                <!-- 第二行 -->
                <div style="padding-top: 15px;">
                    <span class="col-lg-6"><input type="text" class="form-control" id="title"></span>
                    <span class="col-lg-6"><input type="text" class="form-control" placeholder="分类名" id="cname"></span>
                </div>
                <!-- 第三行 -->
                <div style="padding-top: 60px;">
                    <label class="col-lg-6">更新时间</label>
                    <label class="col-lg-6">至</label>
                </div>
                <!-- 第四行 -->
                <div class="form-group has-success">
                    <span class="col-lg-6"><input type="date" class="inp_data form-control"
                            id="update_time"></span>
                    <span class="col-lg-6"><input type="date" class="inp_data form-control"
                            id="last_time"></span>
                </div>
                <div class="pull-right" style="margin-right: 30px; margin-top: 15px;">
                    <button class="btn btn-success">查询</button>
                    <button class="btn btn-success">重置</button>
                    <button class="btn btn-success" id="update">更新</button>
                </div>
            </div>
            <!-- 表格 -->
            <div class="content_2 col-lg-10 ">
                <p>显示 <select>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>项结果</p>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>标题</th>
                            <th>分类名</th>
                            <th>最后更新时间</th>
                            <th>更新者名</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>订单管理已经上线</td>
                            <td>系统公告</td>
                            <td>2019-10-08 15:55:04</td>
                            <td>admin</td>
                            <td style="width: 170px;">
                                <button class="btn btn-group"><span class="glyphicon glyphicon-pencil"></span>编辑</button>
                                <button class="btn btn-group" id="del" onclick="Del(this)"><span class="glyphicon glyphicon-pencil"></span>删除</button>
                                    </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <script>
        $("#update").click(function () {
            var title = $("#title").val();
            var cname = $("#cname").val();
            var update_time = $("#update_time").val();
            if (title == "" || cname == "" || update_time == "") {
                alert("请检查标题/文章分类/更新时间是否有空值")
                return false;
            }
            else {
                var $trs = $('<tr>' +
                    '<td>'+title+'</td>' +
                    '<td>'+cname+'</td>' +
                    '<td>'+update_time+'</td>'+
                    '<td>admin</td>'+
                    '<td style="width: 170px;">'+
                        '<button class="btn btn-group"  style="margin-right:4px;"><span class="glyphicon glyphicon-pencil"></span>编辑</button>'+
                        '<button class="btn btn-group" id="del" onclick="Del(this)"><span class="glyphicon glyphicon-pencil"></span>删除</button>'+
                    '</td></tr >')
                    $("tbody").append($trs)
            }
        })
        // 删除事件
        function Del(obj) {
            if (confirm("确定要删除吗？")) {
            $(obj).parents("tr").remove();
            }
        }
    </script>
</body>

</html>